<template>
  <div class="mod-config">
    <basic-container>
      <navigationZDRW :sign="{ a: true, b: false, c: false }"></navigationZDRW>
      <div class="boxsty zhiBiao" v-if="showZhong == 1">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="发起名称">
                <el-input
                  v-model="dataForm.faqiName"
                  placeholder="发起名称"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人姓名">
                <el-input
                  v-model="dataForm.ryName"
                  placeholder="被考核人姓名"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人岗位">
                <el-input
                  v-model="dataForm.userZw"
                  placeholder="被考核人岗位"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="avue-crud">
          <div
            style="
              display: flex;
              justify-content: flex-end;
              border-top: 1px solid #b0bde2;
              padding-top: 10px;
            "
          >
            <el-button plain type="primary" @click="mingxi">文本模式</el-button>
            <el-button
              type="primary"
              plain
              @click="okall('liebiao')"
              v-loading.fullscreen.lock="fullscreenLoading"
              >同意</el-button
            >
            <el-button type="primary" plain @click="backall('liebiao')"
              >驳回</el-button
            >
          </div>
          <el-table
            ref="table"
            style="width: 100%; margin-top: 20px"
            :data="dataList"
            border
            v-if="tableShow"
            v-loading="dataListLoading"
          >
            <el-table-column
              type="selection"
              width="55"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              type="index"
              width="80"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="faqiName"
              header-align="center"
              align="center"
              label="发起名称"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="userName"
              header-align="center"
              align="center"
              width="120"
              label="被考核人编号"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="ryName"
              header-align="center"
              align="center"
              width="120"
              label="被考核人姓名"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  @click="checkDetails(scope.row, scope.$index)"
                  style="color: #0e258c; cursor: pointer"
                  >{{ scope.row.ryName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="userDeptName"
              header-align="center"
              align="center"
              label="被考核人单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="userZw"
              header-align="center"
              align="center"
              label="被考核人岗位"
              v-if="showType == 1"
              show-overflow-tooltip
            >
              <template slot="header">
                <el-tooltip placement="top" content="点击切换至被考核人职级">
                  <span
                    ><i
                      @click="switchBtn(2)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >被考核人岗位</span
                  >
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="userZj"
              header-align="center"
              align="center"
              label="被考核人职级"
              v-if="showType == 2"
              show-overflow-tooltip
            >
              <template slot="header">
                <el-tooltip placement="top" content="点击切换至被考核人岗位">
                  <span
                    ><i
                      @click="switchBtn(1)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >被考核人职级</span
                  >
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="rwCount"
              header-align="center"
              align="center"
              width="100"
              label="任务数量"
            >
            </el-table-column>
            <el-table-column
              prop="userLxDsc"
              header-align="center"
              align="center"
              width="100"
              label="发起类型"
            >
            </el-table-column>
            <el-table-column
              prop="stateExplain"
              label="任务状态"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <!--进入页面就展示的详情-->
      <el-dialog
        v-if="dataList.length > 0"
        :title="carouselForm.faqiName"
        :visible.sync="centerDialogVisible && dataList.length > 0"
        width="70%"
        :show-close="false"
        center
      >
        <div>
          <table border="1" class="carouselBox" style="width: 100%">
            <tbody>
              <tr>
                <td>被考核人姓名:</td>
                <td>职务:</td>
                <td>岗位:</td>
                <td>考核周期:</td>
              </tr>
              <tr>
                <td>{{ carouselForm.ryName }}</td>
                <td>{{ carouselForm.userZw }}</td>
                <td>{{ carouselForm.userZj }}</td>
                <td>{{ carouselForm.rwYxqq }}至{{ carouselForm.rwYxqz }}</td>
              </tr>
            </tbody>
          </table>
          <div class="btns2" @click="prevBtn"><i class="el-icon-arrow-left" style="color:#fff"></i></div>
          <el-carousel
            style="margin-top: 20px"
            indicator-position="none"
            ref="carouselRef"
            direction="vertical"
            :autoplay="false"
          >
            <el-carousel-item
              v-for="item in dataList"
              style="overflow-y: auto"
              :key="item.id"
            >
              <el-table
                :data="carouselData"
                border
                style="width: 100%"
                v-loading="carouselLoading"
              >
                <el-table-column
                  prop="batchNumber"
                  label="批次"
                  min-width="60"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="renwuName"
                  label="任务名称"
                  min-width="110"
                  show-overflow-tooltip
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="难度系数"
                  header-align="center"
                  align="center"
                >
                  <el-table-column
                    prop="zycd"
                    header-align="center"
                    align="center"
                    label="重要程度"
                    min-width="110"
                  >
                    <template slot="header" slot-scope="scope">
                      <span style="margin-right: 15px">重要程度</span>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        placement="top-start"
                      >
                        <div slot="content">
                          说明：<br />
                          1. 重要程度高，是指重点任务对集团层面有重要影响；<br />
                          2. 重要程度较高，是指重点任务对公司层面有重要影响；<br />
                          3. 重要程度一般，是指重点任务对部门层面有重要影响；<br />
                        </div>
                        <i class="el-icon-info" style="color: #3e51a3"></i>
                      </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                      <div v-for="(item, index) in chengduList">
                        <span v-if="scope.row.zycd == item.id">{{
                          item.type
                        }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wcnd"
                    header-align="center"
                    align="center"
                    label="完成难度"
                    min-width="110"
                  >
                    <template slot="header" slot-scope="scope">
                      <span style="margin-right: 15px">完成难度</span>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        placement="top-start"
                      >
                        <div slot="content">
                          说明：<br />
                          1. 完成难度高，是指重点任务创新性强、协调难度大；<br />
                          2.
                          完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br />
                          3.
                          完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作；<br />
                        </div>
                        <i class="el-icon-info" style="color: #3e51a3"></i>
                      </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                      <div v-for="(item, index) in chengduList">
                        <span v-if="scope.row.wcnd == item.id">{{
                          item.type
                        }}</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="任务有效期"
                >
                  <el-table-column
                    prop="rwYxqq"
                    align="center"
                    value-format="yyyy-MM-dd"
                    label="开始时间"
                    min-width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="rwYxqz"
                    align="center"
                    value-format="yyyy-MM-dd"
                    label="结束时间"
                    min-width="100"
                  >
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="khrName"
                  header-align="center"
                  align="center"
                  min-width="130"
                  label="考核人"
                ></el-table-column>
                <el-table-column
                  prop="weightset"
                  label="权重(%)"
                  min-width="90"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="workTarget"
                  header-align="center"
                  align="center"
                  label="工作目标/成效"
                  min-width="130"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </el-carousel-item>
          </el-carousel>
          <div class="btns" @click="nextBtn"><i class="el-icon-arrow-right" style="color:#fff"></i></div>
          <div style="text-align: right">
            第{{ carouselIndex + 1 }}页/共{{ dataList.length }}页
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button plain type="primary" @click="okall('wenben')"
            >同意</el-button
          >
          <el-button plain type="primary" @click="backall('wenben')"
            >驳回</el-button
          >
          <el-button plain type="primary" @click="centerDialogVisible = false"
            >列表模式</el-button
          >
        </span>
      </el-dialog>
      <khrwDetailTable
        v-if="showZhong == 5"
        ref="renwukaohedetail"
        @fnBackLastPage="fnBackLastPage"
      ></khrwDetailTable>
      <genzongForm
        v-if="genzongFormData.dialogVisible"
        :genzongFormData="genzongFormData"
      ></genzongForm>
      <detailDialog
        :detailDialogData="detailDialogData"
        @detailDialogChildren="detailDialogChildren"
      ></detailDialog>
    </basic-container>
  </div>
</template>

<script>
import { delObj, radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import khrwDetailTable from "@/views/hetongrenwu/components/zhongdian-kaoherenwu-table-detail.vue";
import {
  getWenbenHzList,
  okAllBatch,
  backAllBatch,
  updateRenwuDetailStatus,
  getDetailListdepid,
} from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
import { getList } from "@/api/hetongrenwu/zhongdian/renyuanfenzu";
import { mapGetters } from "vuex";
import genzongForm from "@/views/hetongrenwu/components/genzong-form";
import detailDialog from "../detailDialog.vue";

export default {
  components: {
    khrwDetailTable,
    genzongForm,
    detailDialog,
  },
  data() {
    return {
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radioTwo: "-1",
      showZhong: "1",
      zhibiaoForm: {},
      genzongFormData: {},
      renwufaqiTableData: {},
      rwszbForm: {},
      searchadvanced: true,
      searchheight: "0",
      radioTwoList: radioTwoList,
      showBlock: "1",
      showType: 1,
      tableShow: true,
      detailDialogData: {},
      fullscreenLoading: false,
      carouselLoading: false,
      centerDialogVisible: false,
      carouselForm: {},
      carouselData: [],
      chengduList: [],
      carouselIndex: 0,
      indexs: 0,
    };
  },
  watch: {},
  created() {
    this.getDataList();
    this.getxList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    mingxi() {
      if (this.dataList == null || this.dataList.length == 0) {
        this.$message.warning("没有数据!");
        return;
      }
      this.getCarouseldata(this.dataList[0]);
      this.carouselForm = this.dataList[0];
      this.centerDialogVisible = true;
      this.indexs = 0;
    },
    getxList() {
      getList().then((res) => {
        this.chengduList = res.data.data;
      });
    },
    getCarouseldata(row) {
      this.carouselLoading = true;
      getDetailListdepid({ id: row.recordId }).then((res) => {
        this.carouselData = res.data.data;
        this.$forceUpdate();
        this.carouselLoading = false;
      });
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    switchBtn(e) {
      this.showType = e;
      this.tableShow = false;
      this.$nextTick((res) => {
        this.tableShow = true;
      });
    },
    //查看
    checkDetails(row,index) {
      this.carouselIndex = index;
      this.indexs = index;
      this.getCarouseldata(row);
      this.carouselForm = row;
      this.centerDialogVisible = true;
    },
    nextBtn(){
      this.indexs++;
      if (this.indexs == this.totalPage) {
        this.indexs = 0;
      }
      this.carouselIndex = this.indexs;
      this.dataList.forEach((item, n) => {
        if (this.indexs == n) {
          this.getCarouseldata(item);
          this.carouselForm = item;
        }
      });
    },
    prevBtn(){
      this.indexs--;
      if (this.indexs==0) {
        this.indexs = this.totalPage;
      }
      if (this.indexs== -1) {
        this.indexs = this.totalPage-1;
      }
      if (this.indexs== this.totalPage) {
        this.indexs = 0;
      }
      this.carouselIndex = this.indexs;
      this.dataList.forEach((item, n) => {
        if (this.indexs == n) {
          this.getCarouseldata(item);
          this.carouselForm = item;
        }
      });
    },
    okall(type) {
      var data = [];
      if (type == "wenben") {
        data.push(this.dataList[this.carouselIndex]);
      } else {
        data = this.$refs.table.selection;
      }
      if (data.length == 0) {
        this.$message.error("请至少选择一个任务！");
        return;
      }
      this.$confirm("是否要批量审核吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.fullscreenLoading = true;
        okAllBatch({ rows: data })
          .then((data) => {})
          .then((res) => {
            updateRenwuDetailStatus({ rows: data }).then((res) => {
              this.$message.closeAll();
              this.$message.success("操作成功！");
              this.fullscreenLoading = false;
              this.getDataList();
            });
          })
          .catch((err) => {
            this.$message.closeAll();
            this.$message.error("操作失败！");
            this.fullscreenLoading = false;
            // this.getDataList();
          });
      });
    },
    backall(type) {
      var data = [];
      if (type == "wenben") {
        data.push(this.dataList[this.carouselIndex]);
      } else {
        data = this.$refs.table.selection;
      }
      if (data.length == 0) {
        this.$message.error("请至少选择一个任务！");
        return;
      }
      backAllBatch({ rows: data })
        .then((res) => {
          this.$message.success("操作成功！");
          this.getDataList();
        })
        .catch((res) => {
          this.$message.warning("操作失败！");
        });
    },
    //子集信息
    zhibiaoChild(zhibiaoChild) {
      if (zhibiaoChild) {
        this.showZhong = 1;
        this.getDataList();
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.centerDialogVisible = false;
      getWenbenHzList(
        Object.assign({
          current: this.pageIndex,
          size: this.pageSize,
        },this.dataForm)
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        if (this.dataList.length > 0) {
          this.getCarouseldata(this.dataList[0]);
          this.carouselForm = this.dataList[0];
        }
        this.dataListLoading = false;
      });
    },
    detailDialogChildren() {
      this.getDataList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //子集信息
    renwushuzbChild(data) {
      if (data) {
        this.showZhong = 1;
      }
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    fnBackLastPage(data) {
      if (data == "返回原页面") {
        this.showZhong = 1;
        this.getDataList();
      }
    },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if (c.size < 1) {
          c.push("-");
          c.push("-");
        } else if (c.size < 2) {
          c.push("-");
        }
        return c;
      }
    },
  },
};
</script>
<style>
.carouselBox td {
  padding-left: 10px;
  line-height: 40px;
}
.el-dialog__title {
  font-size: 24px !important;
}
</style>